import React from 'react';
import type { AccountRead } from '../types';
import Card from './ui/Card';

interface AccountCardProps {
  account: AccountRead;
}

const AccountCard: React.FC<AccountCardProps> = ({ account }) => {
  const balance = parseFloat(account.attributes.current_balance);
  const formattedBalance = new Intl.NumberFormat('zh-CN', {
    style: 'decimal',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(balance);

  return (
    <Card className="flex-shrink-0 w-48 h-full flex flex-col justify-between transform hover:-translate-y-1 transition-transform duration-300">
      <div>
        <p className="text-sm text-slate-400">{account.attributes.name}</p>
        <p className="text-2xl font-semibold text-white">
          {account.attributes.currency_symbol}
          {formattedBalance}
        </p>
      </div>
      <p className="text-xs text-slate-500 uppercase">{account.attributes.type}</p>
    </Card>
  );
};

interface AccountListProps {
  accounts: AccountRead[];
}

const AccountList: React.FC<AccountListProps> = ({ accounts }) => {
  return (
    <section>
      <h2 className="text-lg font-semibold text-slate-300 mb-3">账户</h2>
      <div className="flex space-x-4 overflow-x-auto pb-4 h-32 -mx-4 px-4">
        {accounts.map((account) => (
          <AccountCard key={account.id} account={account} />
        ))}
        {accounts.length === 0 && <p className="text-slate-500">未找到任何资产账户。</p>}
      </div>
    </section>
  );
};

export default AccountList;